import React, { useState } from 'react';
import { Row, Col, Button, Image } from 'antd';
import MangeMask from './components/manageMash';
import aliOssUpload from '@/utils/aliOssUpload';
const Cephalogram = (props) => {
  const { src = 'error', onChange } = props;
  const [visible, setVisible] = useState(false);
  const openImagePicker = async () => {
    try {
      const fileHandle = await window.showOpenFilePicker({
        multiple: false, // 设置为 false 表示只能选择一个文件
        types: [
          {
            accept: {
              'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff', '.svg']
            }
          }
        ]
      });
      // 处理文件，例如读取内容
      const file = fileHandle.values().next().value;
      const image = await file.getFile();
      const img = await aliOssUpload(image)
      return img.toString()
    } catch (error) {
      console.error(error);
    }
  }
  return (
    <>
      <div>
        <div style={{
          marginLeft: 8
        }}>
          背景图片<span style={{
            color: '#e64340',

          }}>*</span>
        </div>
        <div style={{ marginLeft: 8 }} span={12}>
          <div
            onClick={(e) => {
              e.stopPropagation();
            }}
            className={`renderSetting_img`}
          >
            <div className="renderSetting_absoluteBox">
              <div className="renderSetting_image">
                <Image
                  width={169}
                  height={299}
                  preview={false}
                  src={src}
                  fallback=""
                />
              </div>
              <div>
                <Button onClick={() => setVisible({
                  show: true
                })} type='link'>选择素材</Button>
                <Button
                  onClick={async (e) => {
                    e.stopPropagation();
                    const image = await openImagePicker()
                    if (image) {
                      onChange({
                        src: image
                      });
                    }

                  }}
                  type="link"
                >
                  本地上传
                </Button>
              </div>

            </div>
          </div>
        </div>

      </div>



      <MangeMask
        handleImage={(e) => {
          setVisible(() => {
            onChange(e);
            return false;
          });
        }}
        visible={visible}
        onClose={() => setVisible(false)}
      ></MangeMask>
    </>
  );
};
export default Cephalogram;
